<template>
  <div class="loginhome">
    <!-- 头部 -->
    <div class="loginheader">
      <span
        class="el-icon-caret-left"
        @click="goback"
        style="cursor: pointer"
      ></span>
      <span>手机号注册</span>
    </div>
    <!-- 登录区域 -->
    <!-- 手机号密码 -->
    <el-form
      :model="loginForm"
      :rules="loginRules"
      ref="loginForm"
      label-width="100px"
      class="formsty"
    >
      <!-- 手机号 -->
      <el-form-item prop="phonenum" class="phoneitem">
        <el-input
          v-model="loginForm.phonenum"
          placeholder="输入手机号"
          prefix-icon="el-icon-phone"
          class="phoneinput"
        ></el-input>
      </el-form-item>
      <!-- 密码 -->
      <el-form-item prop="password">
        <el-input
          type="password"
          v-model="loginForm.password"
          placeholder="设置登录密码，不少于六位"
          prefix-icon="el-icon-lock"
          class="inputpassword"
        ></el-input>
      </el-form-item>
    </el-form>
    <!-- 登录按钮 -->
    <el-button type="primary" class="loginbtn" @click="login">下一步</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        phonenum: "",
        password: "",
      },

      loginRules: {
        phonenum: [
          { required: true, message: "请输入正确手机号", trigger: "blur" },
          {
            min: 8,
            max: 16,
            message: "手机号为11位",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入正确的密码", trigger: "blur" },
          { min: 6, max: 10, message: "长度在 6到 10 个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 调用接口判断是否注册过
    login() {
      this.axios
        .get(
          `http://localhost:3000/cellphone/existence/check?phone=${this.loginForm.phonenum}`
        )
        .then((res) => {
          if (res.data.exist !== 1) {
            this.login1();
          } else {
            this.$message.error("该账号已经注册过,请返回");
            console.log(res);
          }
        })
        .catch((err) => {
          this.$message.error("请稍后再试");
        });
    },
    // 没注册过调用接口获取验证码
    login1() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.axios
            .get(
              `http://localhost:3000/captcha/sent?phone=${this.loginForm.phonenum}`
            )
            .then((res) => {
              this.$router.push({
                path: "/verify",
                name: "verify",
                query: { phonenum: "phonenum" },
                params: { password: "password" },
              });
            })
            .catch((err) => {
              this.$message({
                showClose: true,
                message: "请稍后再试",
              });
            });
        } else {
          return false;
        }
      });
    },
    //   返回按钮返回
    goback() {
      this.$router.push("/");
    },
  },
};
</script>

<style scoped>
.loginheader {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  color: red;
  border-bottom: red 1px solid;
  height: 30px;
}
.loginbtn {
  width: 330px;
  margin-top: 30px;
  margin-left: 10px;
  background-color: red;
}
.formsty {
  width: 350px;
  margin-left: -90px;
}
.phoneinput {
  width: 330px;
  margin-top: 20px;
}

.inputpassword {
  width: 330px;
  margin-top: 10px;
}
</style>